<template>
    <div class="semblable-model tentative-superposition-mask">
   
        <div class="gradient-text" v-if="isTitle">
                    <!-- <div style="border-bottom: 1px solid red; width:200px;">舞美模型<text style="font-size: 13px; margin-left:5px;">STAGE MODEL</text></div> -->
                    <div class="container">
                        <div class="stage-model">
                            <span class="title">
                                <span style="color: #e95513; font-size: 20px !important;">{{zhTitle || '类型'}}</span>
                                <span class="subtitle">{{enTitle || '类型'}}</span>
                            </span>
                        </div>
                        <div class="more" @click="moreClick">>>>></div>
                    </div>
                </div>
        <ul class="waterfall" style="min-height: 0 !important;">
            <el-space wrap>
                <li class="image-boxs" v-for="(item, index) in recommendList" :key="index" v-show="!item.not_like_show">
                    <div class="list-model-collect" v-if="item.originate == 1">
                            <span>创意Pro</span>
                        </div>
                    <div class="model-contrast" v-if="userInfo.isLogin()">
                        <div class="js_favorite_popup" v-if="!item.not_like" @click="productCareClick(item.id, index)">
                            <el-icon :color="item.is_collect ? 'red' : ''">
                                <component is="StarFilled"></component>
                            </el-icon>
                            <span class="balloon-tips">{{ item.is_collect ? '取消收藏' : '收藏' }}</span>
                        </div>
                        <div class="not-like-operate" v-if="!item.not_like" @click="notLikeClick(item.id, index)">
                            <el-icon>
                                <component is="Close"></component>
                            </el-icon>
                            <div class="balloon-tips">
                                <div class="not-like-btn">不喜欢</div>
                            </div>
                        </div>
                    </div>
                    <a class="image-boxs-mask" @click="productDetailClick(item.id, item.ascription, item.nav_one_id, item.nav_two_id, item.nav_three_id)">
                        <div class="cover-images" style="height: 140px;">
                            <img :src="item.url" class="load_img"  @error.once="useDefaultImage" :title="item.title" :alt="item.title">
                            <div class="not-like-css" v-if="item.not_like" style="z-index: 99999999;">
                                <div class="not-like-content">
                                    <div class="not-like-text">该素材已屏蔽</div>
                                    <div class="not-like-cancel-btn" @click="notLikeClick(item.id, index)">取消不喜欢</div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="model-goods-info clearfix">
                            <p class="model-goods-name" :title="item.title">
                                {{ item.title }}
                            </p>
                        </div> -->
                    </a>
                </li>
            </el-space>
        </ul>
    </div>
</template>
<script lang="ts" setup>
import { nextTick } from 'vue';
import { productCare, notLike,getnavbyid} from '../api/home/index'
import { ElMessage } from 'element-plus';
import { useUserInfo } from '../stores/userInfo'
const props = defineProps(['recommendList','isTitle','zhTitle','enTitle','oneId']);
const userInfo = useUserInfo() //获取用户信息
import { encrypt, DEFAULTKEY } from '../utils/keyEnum'
import { useSiteConfig } from '../stores/siteConfig'
import { useNavConfig } from '../stores/navConfig'
import router from '../router'
import eventBus from '../utils/event-bus';
const siteConf = useSiteConfig()

const navConfig = useNavConfig();

//收藏取消收藏
const productCareClick = (id: any, index: any) => {
    productCare({ id: id }).then((res: any) => {
        if (res.code == 1) {
            props.recommendList[index].is_collect = !props.recommendList[index].is_collect
            ElMessage.success(props.recommendList[index].is_collect ? '收藏成功' : '取消收藏成功')
        }
    })
}
//喜不喜欢
const notLikeClick = (id: any, index: any) => {
    notLike({ id: id }).then((res: any) => {
        if (res.code == 1) {
            props.recommendList[index].not_like = !props.recommendList[index].not_like
        }
    })
}

const useDefaultImage = (event:any)=>{
    event.target.src = siteConf.defalut_product_img
}

const moreClick = () => {
    getnavbyid({ nav_id: props.oneId}).then((res: any) => {
        if (res.code == 1) {
            let item = res.data.list[0]
            navConfig.dataFill(item)
            navConfig.removeMenu()
            navConfig.setClickGrade(1);
            navConfig.setTwoActiveId(0);
            navConfig.setProductPid(item['id'])
            navConfig.setSelectType('all')
            eventBus.emit('initProduct')
            nextTick(() => {
                router.push({ name: '/product' })
            })
        }
    })
}
//详情
const productDetailClick = (id: number, ascription: any, nav_id: number, nav_two_id: number, nav_three_id: number) => {
    navConfig.setTwoActiveId(nav_two_id);
    navConfig.setTreeActiveId(nav_three_id);
    const queryToAse = encrypt({
        product_id: id,
        ascription: ascription
    }, DEFAULTKEY)
    nextTick(() => {
        // const resolvedRoute = router.resolve({

        // name: '/product-detail',

        // query: { value: queryToAse }

        // });

        // window.open(resolvedRoute.href, '_blank');
         router.push({ name: '/product-detail', query: { value: queryToAse } })
    });

}
</script>
<style scoped>

.gradient-text {
    width: 96%;
    font-weight: bold !important;
}

/* 新增容器 */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 垂直居中 */
    gap: 15px;
    /* 元素间距 */
}

/* 修改原有样式 */
.stage-model {
    --line-color: #e95513;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left:15px;
    line-height: 1;
}

.more {
    font-size: 16px;
    color: #e95513;
    position: relative;

    /* 保持与竖线对齐 */
}
.title {
  position: relative;
  display: inline-block;
  margin-top: 1.5em;
}
/* 保持原有竖线和下划线样式 */
.stage-model::before {
    content: '';
    position: absolute;
    left: 0;
    height: calc(1em + 15px);
    width: 7px;
    background: var(--line-color);
    top: 50%;
    transform: translateY(calc(-50% + 0.1em));
}

.title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--line-color);
}

.subtitle {
    font-size: 13px;
    margin-left: 5px;
    opacity: 0.8;
    vertical-align: middle;
    color: #e95513;
}
.more {
  transition: all 0.3s;
  cursor: pointer;
}
.more:hover {
  color: #e95513;
  transform: translateX(3px);
}
  </style>